import { PageContainer } from "@ant-design/pro-layout"
import ProTable from "@ant-design/pro-table";

import { Badge, Button, message, Space, Switch } from "antd";
import { useRef, useState } from "react";
import { roleAdd, roleList } from "@/services/ant-design-pro/roles";
import { PlusOutlined } from "@ant-design/icons";
import ProForm, { ModalForm, ProFormDigit, ProFormRadio, ProFormText } from "@ant-design/pro-form";

const User2: React.FC = () => {

    let tableRef: any = useRef();
    let addRef: any = useRef();
    //列表数据内容
    const columns: any = [
        {
            title: "角色编号",
            dataIndex: "id",
            search: false,
        },
        {
            title: "角色名",
            dataIndex: "role_name",
        }, {
            title: "角色标识",
            dataIndex: "role_code",
        }, {
            title: "显示顺序",
            dataIndex: "order",
            search: false,
        }, {
            title: "状态",
            dataIndex: "status",
            valueEnum: {
                0: {
                    text: "关闭"
                },
                1: {
                    text: "开启"
                }
            },
            render: (text: any, record: any) => [
                <Badge status={record.status ? "processing" : "error"} text={record.status ? "启用" : "关闭"}>
                </Badge>
            ]
        }, {
            title: "操作",
            width: "180px",
            search: false,
            render: (text: any, record: any) => [
                <Space size={6}>
                    <Button type='link'>修改</Button>
                    <Button type='link' danger>删除</Button>
                </Space>
            ]
        }
    ]
    return (
        <PageContainer
        >
            <ProTable
                rowKey="id"
                actionRef={tableRef}
                rowSelection={{
                    type: "checkbox"
                }}
                columns={columns}
                request={roleList}
                pagination={{
                    showSizeChanger: true,
                    pageSizeOptions: [5, 10, 15, 20],
                    defaultPageSize: 5,
                }}
                toolBarRender={() => [
                    (<ModalForm
                        title="添加角色"
                        trigger={
                            <Button type='primary'><PlusOutlined /> 新建角色</Button>
                        }
                        formRef={addRef}
                        submitTimeout={500}
                        onVisibleChange={() => addRef.current.resetFields()}
                        onFinish={async (values: any) => {
                            console.log(values)

                            let res = await roleAdd({ ...values });

                            message.success(res.msg);

                            tableRef.current.reload();
                            return true;
                        }}
                    >
                        <ProForm.Group>
                            <ProFormText name="role_name" width='md' placeholder="输入角色名字" required rules={[{ required: true, message: "输入角色名字" }]} label="角色名字" />
                            <ProFormText width='md' name="role_code" placeholder="输入角色标识" required rules={[{ required: true, message: "输入角色名字" }]} label="角色标识" />
                        </ProForm.Group>
                        <ProForm.Group>
                            <ProFormDigit name="order" initialValue={100} width='md' placeholder="输入排序" required rules={[{ required: true, message: "输入角色名字" }]} label="排序" />
                            <ProFormRadio.Group label="状态" name="status" width='md' initialValue={1} options={[{ label: "关闭", value: 0 }, { label: "开启", value: 1 }]} />
                        </ProForm.Group>
                    </ModalForm>)
                ]}
            >

            </ProTable>
        </PageContainer >
    )
}


export default User2;